import React, { useState } from "react";
import cloneDeep from "lodash/cloneDeep";

const Version = () => {
  return <span className="bg-[#1F2429] rounded py-1 px-3">v2.9</span>;
};

const ImgDisplay = () => {
  const [imgArray, setImgArray] = useState([
    {
      url: "./imgs/1.jpg",
      active: true,
    },
    {
      url: "./imgs/2.png",
      active: false,
    },
    {
      url: "./imgs/3.jfif",
      active: false,
    },
    {
      url: "./imgs/4.png",
      active: false,
    },
  ]);

  const toLeft = () => {
    const array = cloneDeep(imgArray);
    console.log("toLeft ~ array:", array);
    const index = array.findIndex((item) => item.active);
    if (index !== 0) {
      array[index].active = false;
      array[index - 1].active = true;
      setImgArray(array);
    }
  };

  const toRight = () => {
    const array = cloneDeep(imgArray);
    const index = array.findIndex((item) => item.active);
    if (index !== array.length - 1) {
      array[index].active = false;
      array[index + 1].active = true;
      setImgArray(array);
    }
  };

  return (
    <div className="flex justify-between">
      <div onClick={toLeft} className="ml-[11px] flex items-center">
        左
      </div>
      <div className="h-[600px] flex items-center justify-center">
        <img
          src={imgArray.find((item) => item.active)?.url}
          className="max-w-[400px]"
          alt=""
        />
      </div>
      <div onClick={toRight} className="mr-[11px] flex items-center">
        右
      </div>
    </div>
  );
};

const VersionDescription = () => {
  const [isShow, setIsShow] = useState(false);
  return (
    <div className="mt-4">
      <div
        className="flex flex-wrap overflow-hidden"
        style={{
          borderBottom:
            "20px solid linear-gradient(180deg, #0D1014 0%, #0D1014 100%)",
          height: isShow ? "100%" : "76px",
        }}
      >
        这是一段模型介绍啊啊啊啊啊，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段文字介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这这是一段模型介绍啊啊啊啊啊，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段文字介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这这是一段模型介绍啊啊啊啊啊，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍，这是一段模型介绍。
      </div>
      <div onClick={() => setIsShow(!isShow)}>
        {isShow ? "收起展示" : "全部展示"}
      </div>
    </div>
  );
};

const ModelInfo = () => {
  return (
    <div
      className="rounded-lg bg-[#13171C]"
      style={{ border: "1px solid #1F2429" }}
    >
      <div
        className="h-9 flex items-center px-4"
        style={{ borderBottom: "1px solid #1F2429" }}
      >
        模型信息
      </div>
      <div className="flex">
        <div className="flex flex-col w-[50%] p-4">
          <div className="flex gap-[72px]">
            <div>基础算法</div>
            <div className="text-[#577EFF]">1.5</div>
          </div>
          <div className="flex gap-[72px] mt-[10px]">
            <div>模型来源</div>
            <div>原创</div>
          </div>
          <div className="flex gap-[72px] mt-[10px]">
            <div>模型使用</div>
            <div>所有人可见（模型社区）</div>
          </div>
        </div>
        <div
          className="flex flex-col w-[50%] p-4"
          style={{ borderLeft: "1px solid #1F2429" }}
        >
          <div className="flex gap-[72px]">
            <div>是否允许下载</div>
            <div>是</div>
          </div>
          <div className="flex gap-[72px] mt-[10px]">
            <div>是否允许商用</div>
            <div>是</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const UserCard = () => {
  return <div></div>;
};

const Todo = () => {
  return (
    <div className="flex gap-6 w-full h-full">
      <div className="w-[848px]">
        <div className="text-[24px] font-medium text-[#fff] w-[848px] mb-[13px]">
          真实人物摄影真实人物摄影真实人物摄影真实人物摄影真实人物摄影
        </div>
        <span className="text-[#577EFF] text-[12px] font-normal px-3 py-[5px] bg-[#1D2539] w-auto flex-none rounded-md">
          模型类型：LoRA
        </span>
        <div className="mt-5">
          <Version />
        </div>
        <div className="mt-3">
          <ImgDisplay />
        </div>
        <div className="mt-6">触发词：摄影摄影摄影摄影</div>
        <VersionDescription />
        <div className="mt-6">
          <ModelInfo />
        </div>
      </div>
      <div className="w-[436px]">
        <UserCard />
        <div>
          <div>立即生图</div>
          <div>爱心</div>
        </div>
        <div>
          <div>下载</div>
          <div>入库</div>
          <div>分享</div>
        </div>
      </div>
    </div>
  );
};
export default Todo;
